<template>
    <div class="left-box" v-loading="loading">
        <router-link to="/console/" class="logo pic">
            <img src="@/assets/logo.png" />
        </router-link>
        <div class="btn-list">
            <template v-for="(value, key, index) in langList" :key="key">
                <span class="space" v-if="index !== 0"> | </span>
                <el-button link @click="switchLangHandle(key)">{{ value }}</el-button>
            </template>
        </div>
        <p>{{ $t('forgetPwd_continue.tip_1') }}</p>
        <p>{{ $t('forgetPwd_continue.tip_2') }}</p>
        <el-button size="large" class="login-btn" color="#F06423" @click="goPage('/')">{{ $t('forgetPwd.btn2_text') }}</el-button>
        <p class="copyright">Copyright © 2025 The Education University of Hong Kong</p>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

import { useI18n } from 'vue-i18n'
import { setLocale, langList } from '@/locales/i18n'
import type { SupportedLocales } from '@/locales/i18n'
import type { MessageSchema } from '@/types/i18n'
import { goPage } from '@/utils/global'

const { locale, t } = useI18n<{ message: MessageSchema }, SupportedLocales>()
const loading = ref(false)

// 语言切换
const switchLangHandle = (lang: SupportedLocales) => {
    setLocale(lang)
    locale.value = lang
}

onMounted(() => {})
</script>
